<template>
  <label
    role="radio"
    class="lg-radio"
    :class="{ checked: this.label == this.selectNum, disabled: disabled }"
    :style="[
      { color: styleObj.color },
      { fontSize: styleObj.fontSize ? styleObj.fontSize + 'mm' : '' },
      { fontWeight: styleObj.fontWeight },
      { fontStyle: styleObj.fontStyle },
      { ...comBorderBgc },
    ]"
  >
    {{ this.label }}{{ this.selectNum }}
    <span class="lg-radio__ico`n" :style="comBorderObj">
      <span class="lg-radio__icon_after" :style="{ ...comBorderBgc }"></span>
    </span>

    <input
      type="radio"
      ref="radio"
      :name="model"
      class="lg-radio__original"
      :value="label"
      @click="select"
      :disabled="disabled"
    />
    <span class="lg-radio__label">
      <span contenteditable="true"></span>
      <!-- 插入的单选名称 -->
      <!-- {{ fontObj.fontColor }}
      {{ comBorderObj }}

      <slot></slot> -->
    </span>
  </label>
</template>
<script>
const color = "yellow";
export default {
  name: "radioButton",
  // 自定义v-model，使用change事件更新model的值
  // model: {
  //   prop: "model",
  //   event: "change",
  // },
  props: {
    //
    label: {
      type: [Number, String],
      default: "1",
      // required: true,
    },
    // 这里的model指的是上面定义的v-model的prop  绑定的数据类型 数字或者 字符串  必填！
    model: {
      type: [Number, String],
      default: "",
      // required: true,
    },
    // 是否 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 字体配置
    styleObj: {
      type: Object,
      default: function() {
        return {
          fontSize: 20,
          // fontWeigth: true,
          color: "#000000",
          textAlign: "left",
          fontWeight: "normal",
          fontStyle: "normal",
          fontFamily: "simsun",
        };
      },
      // 字体颜色
      // 创建属性
    },
    createObj: {
      type: Object,
      default: function() {
        return {
          type: 1,
          id: "radioBtn_123",
          x: 0,
          y: 0,
          width: 10,
          height: 10,
        };
      },
    },
    borderObj: {
      type: Object,
      default: function() {
        return {
          // 边框颜色
          borderColor: "#e06c75",
          // 选中的边框颜色
          borderCheckColor: "#1cd66c",
          // 线条配置 默认实线 0 实线 1 虚线
          borderLine: 0,
          // 边框宽度
          borderWidth: 7, //单位mm
          // 边框高度
          borderHeight: 7, //单位mm
          // 边框形状
          borderShape: 0, //0 圆形 ，1方形
        };
      },
    },
    checkBgc: {
      type: Object,
      default: () => {
        return {
          "--pseudoElementBackgroundColor": "red",
        };
      },
    }, //伪元素颜色
  },
  data() {
    return {
      checked: false,
      color: "#000000",
      selectNum: 0,
      // 组件唯一标识
      typeID: "radioButton",
      typeName: "单选框",
      descStr: "单选框",
      verNum: 1,
    };
  },
  // 计算
  //  borderObj: {
  // 边框颜色
  // borderColor: "#d85c54",
  // // 选中的边框颜色
  // borderCheckColor: "#5a9dd2",
  // // 线条配置 默认实线 0 实线 1 虚线
  // borderLine: 0,
  // // 边框宽度
  // borderWidth: 5,
  // // 边框高度
  // borderHeight: 5,
  // // 边框形状
  // borderShape: 0, //0 圆形 ，1方形
  // },
  computed: {
    comBorderObj() {
      let createdObj = this.createObj;

      return [
        {
          width: createdObj.width + "mm",
          // borderColor: borderObj.borderColor,
          borderColor: "red",
          height: createdObj.height + "mm",
          top: createdObj.y,
          left: createdObj.x,
        },
      ];
      // const { prefixCls } = this;
      // return {
      //   [`${prefixCls}-wrapper`]: true,
      // };
    },
    comBorderBgc() {
      let color = this.borderObj.borderCheckColor;
      console.log(`${color}`, "color");
      return {
        "--pseudoElementBackgroundColor": color ? `${color}` : "red",
      };
    },

    // checkboxClass() {
    //   const { prefixCls, indeterminate, checked, disabled } = this;
    //   return {
    //     [`${prefixCls}`]: true,
    //     [`${prefixCls}-checked`]: checked,
    //     [`${prefixCls}-disabled`]: disabled,
    //     [`${prefixCls}-indeterminate`]: indeterminate,
    //   };
    // },
  },
  methods: {
    select(e) {
      this.$emit("change", { value: this.$refs.radio.value, name: this.model });

      this.selectNum = this.$refs.radio.value;
      console.log(this.selectNum, "selectNum");
      // this.checked = this.$refs.radio.value == 1;
      console.log(this.label, this.selectNum, "???");

      // let parent = e.currentTarget.parentElement.parentElement;
      // console.log(parent);
    },
  },
  watch: {
    // 监听model值的改变，以便更新checked的值
    model: function(val) {
      console.log(val, "model");
      this.checked = val === this.label;
    },
    selectNum: function(val) {
      console.log(val, "watch");
      // console.log(this.$refs.radio);
    },
  },
  mounted() {
    console.log(this.fontObj, "fontobj");
    this.select();
  },
};
</script>

<style lang="scss" scoped>
@import "./main.scss";
</style>
